<template>
  <div class="box">
    <!-- default-openeds ： 默认展开菜单的第几项，值是数组 -->
    <!-- collapse ： 是否水平伸缩 -->
    <!-- @select="selectHandle 实现点击菜单跳转 -->
    <el-menu
      :default-openeds="['0']"
      :collapse="asideStore.isCollapse"
      @select="selectHandle"
      unique-opened
      :default-active="defaultRoute"
    >
      <div class="log">
        <img src="../assets/2.png" alt="" />
      </div>
      <el-sub-menu
        v-for="(item, index) in admin.menus"
        :key="item.id"
        :index="index + ''"
      >
        <template #title>
          <Icon :name="item.icon"></Icon>
          <span class="spa">{{ item.name }}</span>
        </template>
        <el-menu-item
          :index="son.frontpath"
          v-for="(son, index2) in item.child"
          :key="son.id"
        >
        <Icon :name="son.icon"></Icon>

          {{ son.name }}</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import Icon from "../components/Icon.vue";

import { adminStore } from "../stores/admin";
import { useAsideStore } from "@/stores/aside.js";
import { ref } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
const admin = adminStore();
const asideStore = useAsideStore();

//  获取路由实例
const router = useRouter();
const route = useRoute();
// console.log(route.path);
// 配合 default-active 属性  让页面刷新加载时默认激活当前菜单
let defaultRoute = ref(route.path);

// 菜单选中 实现路由跳转
function selectHandle(index) {
  // console.log(index);
  // console.log(index);
  router.push(index);
  // console.log(route.path, "222");
}
onBeforeRouteUpdate((to, next) => {
  defaultRoute.value = to.path;
});
</script>

<style lang="less" scoped>
.el-menu {
  border-right: none;
  background: linear-gradient(to bottom,  white, rgb(29,164,219));
  // background-color: rgb(255,166,106);
}
.el-sub-menu .el-menu-item {
  background-color: #eef8f8;
}
.el-sub-menu .el-menu-item:hover{
  color: deepskyblue;
  background-color: rgb(219, 247, 238);
}
.log {
  width: 100%;
  /* height: 130px; */
  // background-color: antiquewhite;
}
.el-menu-item {
  width: 200px;
}
img {
  width: 100%;
  display: block;
}
</style>
